<template xmlns:v-on="http://www.w3.org/1999/xhtml">
	<div class="set" style="height: 100%;">
		<div class="addAttendance">
			<span id="add" @click="addcheck">
        		数据导出
        	</span>
        	<div id="long">
        		
        	</div>
        	<span id="record" @click="DataExportRecord">
        		   数据导出记录
        		</span>
		</div>
		<div class="unData" v-show="unData">暂无数据</div>
		        <div class="dataTable" v-show="hasData">
            <div class="main_rightMain">
            <div class="noticNav">
                <span>导出文件名称</span>
                <span>导出人员</span>
                <span>导出时间</span>
                <span>审批类型</span>
            </div>
            <ul>
                <li v-for="(item,index) in tableData" :key="index">
                    <!-- <p>{{item.title}}</p> -->
                    <div >
                        <div class="noticNavs">
                            <span>{{item.fileName}}</span>
                            <span>{{item.name}}</span>
                            <span>{{item.createTime | Date}}</span>
                            <span style="cursor:default" :title=item.approvalType>{{item.approvalType}}</span>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="pagination">
       	        <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    small
                    layout="prev, pager, next"
                    :total="totals">
                </el-pagination>
            </div>
        </div>
            </div>

	</div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  name: "set",
  data() {
    return {
			unData:false,
			hasData:false,
      totals: 0,
      currentPage: 1,
      tableData: []
    };
  },

  created: function() {
    let self = this;
    //  获取列表
    self
      .getapprovalDatalog({
        current: self.currentPage,
        size: 10,
        oid: sessionStorage.getItem("orgId")
      })
      .then(data => {
        if (data.code == "000000") {
          if (data.data.records.length == 0) {
						self.unData = true
						self.hasData = false
          } else {
							self.unData = false
						self.hasData = true
            self.tableData = data.data.records;
            self.totals = data.data.total;
          }
        } else {
          this.$message({
            type: "info",
            message: data.msg
          });
        }
      })
      .catch(msg => {
        this.$message({
          type: "info",
          message: msg.error
        });
      });
  },
  filters: {
    typeFun(val) {
      if (val == 1) {
        return "是";
      } else {
        return "否";
      }
    },
    Date(val) {
        if (val) {
                    var now = new Date(val);
                    var year = now.getYear() - 100;
                    var month = now.getMonth() + 1;
                    month = month > 9 ? month : "0" + month;
                    var date = now.getDate();
                    date = date > 9 ? date : "0" + date;
                    var hour = now.getHours();
                    hour = hour > 9 ? hour : "0" + hour;
                    var minute = now.getMinutes();
                    minute = minute > 9 ? minute : "0" + minute;
                    return "20" + year + "-" + month + "-" + date + " " + hour + ":" + minute;
                } else {
                    return "暂无"
                }
    }
  },
  watch: {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      let self = this;
      self.currentPage = val;
      self
        .getapprovalDatalog({
          current: val,
          size: 10,
          oid: sessionStorage.getItem("orgId")
        })
        .then(data => {
          if (data.code == "000000") {
            if (data.data.records.length == 0) {
								self.unData = true
						self.hasData = false
            } else {
								self.unData = false
						self.hasData = true
              self.tableData = data.data.records;
              self.totals = data.data.total;
            }
          } else {
            this.$message({
              type: "info",
              message: data.msg
            });
          }
        })
        .catch(msg => {
          this.$message({
            type: "info",
            message: msg.error
          });
        });
    },
    addcheck: function() {
      this.$router.push({
        path: "/home/approve/dataExport"
      });
    },
    DataExportRecord() {
      this.$router.push({
        path: "/home/approve/dataExportRecord"
      });
    },
    ...mapActions(["getapprovalDatalog"])
  }
};
</script>
<style scoped>
.el-table {
  border: none !important;
}

.addAttendance {
  height: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  margin-left: 16px;
  margin-right: 16px;
  padding-top: 20px;
  padding-bottom: 12px;
  color: #303030;
  font-size: 14px;
}
#add {
  color: #000;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
}
#record {
  color: #e7744a;
  cursor: pointer;
}
#long {
  display: inline-block;
  width: 1px;
  height: 14px;
  padding-top: 10px;
  margin-left: -10px;
  background-color: #aeaeae;
}
.recordTable {
  width: 90%;
  margin-left: 20px;
  margin-top: 20px;
}
.pagination {
  float: right;
  margin-right: 20px;
}
.dataTable {
  text-align: center;
  width: 100%;
  height: auto;
  margin-left: 10px;
}
.addTitle {
  float: right;
  margin-top: -40px;
  margin-right: 30px;
  cursor: pointer;
  width: 70px;
  height: 30px;
  background-color: #e7744a;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  border-radius: 4px;
}
.pagination {
  float: right;
  margin-right: 20px;
}
.main_rightTop p:nth-child(1) {
  color: #303030;
  font-size: 14px;
  padding-top: 24px;
  padding-bottom: 12px;
  margin-left: 44px;
  /* width: calc(100% - 88px); */
  border-bottom: 1px solid #d9d9d9;
}

.main_rightTop {
  width: 100%;
}

.main_rightMain {
  margin-left: 44px;
  width: calc(100% - 88px);
}

.noticNav {
  width: 100%;
  height: 48px;
  line-height: 48px;
  background: #f4f4f6;
  margin-top: 20px;
}
.noticNavs {
  width: 100%;
  height: 48px;
  line-height: 48px;
  /* background: #f4f4f6; */
  /* margin-top: 20px; */
}
.noticNavs span:nth-child(4) p {
  width: 20%;
  height: 40px;
  float: left;
}

.noticNavs span:nth-child(1) {
  width: 25%;
  text-align: left;
  padding-left: 24px;
}
.noticNavs span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  float: left;
  width: 25%;
  text-align: center;
}
.noticNav span:nth-child(1) {
  width: 25%;
  text-align: left;
  padding-left: 24px;
}
.noticNav span {
  float: left;
  width: 25%;
  text-align: center;
}
/* .noticNav span:nth-child(1) {
        float: left;
        margin-left: 24px;
    }
    
    .noticNav span:nth-child(2) {
        float: right;
        margin-right: 134px;
    } */
ul li {
  height: 48px;
  border-bottom: 1px solid #d9d9d9;
}
ul li > p {
  height: 48px;
  line-height: 48px;
  margin-left: 24px;
  cursor: pointer;
}
.biaoti {
  float: left;
}

.unread {
  float: left;
  margin-left: 189px;
}
.grayfont {
  color: #8f8e94;
}
.borderStyle {
  cursor: pointer;
  font-size: 12px;
  color: #fcb298;
  width: 48px;
  display: inline-block;
  border: 1px solid #fcb298;
  height: 20px;
  line-height: 20px;
  border-radius: 17px;
  text-align: center;
}
.unData{
	width: 100%;
	color:#303030;
	font-size: 20px;
	text-align: center;
	margin-top: 100px;
}
</style>